<template>
  <div class="container">
    <h1>{{ msg }}</h1>
    <HelloWorld :msg="msg"></HelloWorld>
    TableHeader:
    <TableHeader></TableHeader>
    <!-- tab-header -->
    <TabHeader @tabClick="tabClick" :title="title" :tabIndex="tabIndex"></TabHeader>
    <!-- tab-content  -->
    <TabContent :list="list"></TabContent>
  </div>
</template>
<script>
import axios from 'axios'
import TabHeader from '@/components/TabHeader.vue'
import TabContent from '@/components/TabContent.vue'
// @ -> src
import HelloWorld from '@/components/HelloWorld.vue'
import TableHeader from '@/components/base/table/Table-header.vue'
export default {
  // 局部子组件，需要注册才能使用
  components: {
    TabHeader,
    TabContent,
    HelloWorld,
    TableHeader,
  },
  data() {
    return {
      msg: 'hello',
      title: ['正在上映', '即将上映'],
      list: [],
      tabIndex: 0,
    }
  },
  created() {
    // 1. 第一次默认请求一次数据
    this.fetchMovieList()
  },
  methods: {
    // 请求数据函数
    async fetchMovieList(type = '正在上映') {
      const res = await axios.get('/data.json')
      this.list = res.data.filter((v) => v.type === type)
      console.log('list:', this.list)
    },
    // tab切换函数
    tabClick(index) {
      console.log('父组件接收到的index:', index)
      this.tabIndex = index
      if (this.tabIndex === 1) {
        this.fetchMovieList('即将上映')
      } else {
        this.fetchMovieList('正在上映')
      }
    },
  },
}
</script>
<style lang="scss">
.tab-header span {
  display: inline-block;
  padding: 10px;
  margin: 5px;
  background: lightcoral;
  color: white;
  border-radius: 5px;
}
.tab-header .active {
  background: red;
  color: wheat;
}
</style>
